<template>
	<view class="membertransfer paddingbottom8">
		<!-- 				<view v-for="(item,index) in dataInfo" :key="index">
			{{item}}
		</view> -->
		<image src="../../static/images/huiyuanzhuanhui_copy.png" mode="" class="img"></image>
		<view class="btn-img flex marginb16">
			<view class="flex1 flex  background-f borderradiuss" @click="gofillinthemembershipform">
				<image src="../../static/images/tianbaoruhui.png" mode="" class="image"></image>
				<text style="font-weight: 700;">填报入会</text>
			</view>
			<view class="flex1 flex background-f borderradiuss marginL8" @click="goscanthecodetojoin">
				<text class="flex1 marginL20" style="font-weight: 700;">扫码入会</text>
				<image src="../../static/images/saomaruhui.png" mode="" class="image"></image>
			</view>
		</view>
		<view class="btn-img flex marginb16">
			<view class="flex1 flex background-f borderradiuss " @click="goapplyfororganizer">
				<text class="flex1 marginL20" style="font-weight: 700;">扫码申请组织员</text>
				<image src="../../static/images/shenqingzuzhiyuan.png" mode="" class="image"></image>
			</view>
		</view>
		
		<!-- 		<view class="btn-img flex marginb16">
			<view class="flex1 flex background-f borderradiuss marginL8" style="margin-left: 0;" @click="goscanthecodetojoin">
				<text class="flex1 marginL20" style="font-weight: 700;">扫码入会</text>
				<image src="../../static/images/saomaruhui.png" mode="" class="image"></image>
			</view>
		</view> -->
		<!-- 		 <view class="marginb16 background-f borderradius laba">
			<image src="../../static/images/laba.png" mode="" class="laba-img"></image>
			<text class="laba-text">您提交的入会申请被拒绝，原因：xxxxxx，请按照要求重新填报。</text>
		</view> -->

		<view class="margin-b">
			<view class="tianbao tianbao-backimg">
				<text class="flex1 tb-text">填报入会流程</text>
				<image src="../../static/images/xieziban.png" mode="" class="tianbao-img"></image>
			</view>
			<view class="steps background-f borderradius">
				<view class="step" v-for="(step,index) in stepList" :key="index">
					<text class="circle"></text>
					<view class="step-title">{{step}}</view>
					<view class="line" v-if="index!=stepList.length-1"></view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="tianbao tianbao-backimg">
				<text class="flex1 tb-text">扫码入会流程</text>
				<image src="../../static/images/code.png" mode="" class="tianbao-img"></image>
			</view>
			<view class="steps background-f borderradius">
				<view class="step" v-for="(step,index) in codestepList" :key="index">
					<text class="circle"></text>
					<view class="step-title">{{step}}</view>
					<view class="line" v-if="index!=stepList.length-1"></view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content-data">
				<QRCodeScanner v-if="sendCode" @decodeText="onScan" />
			</view>
		</uni-popup>

		<uni-popup ref="popups" background-color="#fff">
			<view class="popup-content-data">
				<QRCodeScanner v-if="sendCodes" @decodeText="onScans" />
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import QRCodeScanner from '@/components/QRCodeScanner.vue';
	import {
		toast
	} from '../../utils/common';
	import {
		getPagesToken,
		setPagesToken
	} from '@/utils/auth';
	import {
		getUserApplicationRecords
	} from '../../api/work/employeemembership';
	export default {
		components: {
			QRCodeScanner
		},

		onShow() {
			// 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			// 检测平台类型
			const platform = systemInfo.platform;
			if (platform == 'ios' || platform == 'android') {
				this.userTopAuth(true, '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential').then(res => {
					this.formDataSet(res)
				}).catch(err => {
					this.formDataSet(err)
					// this.$router.back();
				})
			} else {
				// 当前页面用户数据 KEY
				this.userTopAuth(false, '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential').then(res => {
					console.log(res);

					this.formDataSet(res)

				}).catch(err => {
					this.formDataSet(err)

					// this.$router.back();

				})
			}

			this.getUserApplicationRecords()

		},

		data() {
			return {
				dataInfo: [],
				sendCode: false,
				sendCodes: false,
				fillinthemembershipformData: null,
				stepList: [
					"选择填报入会",
					"填写申请入会资料",
					"选择要加入的工会组织",
					"提交申请等待审批"
				],
				codestepList: [
					"选择扫码入会",
					"扫描入会二维码",
					"填写申请入会资料",
					"提交申请等待审批"
				]
			}
		},
		methods: {
			onScans(result) {
				this.$refs.popups.close();
				console.log(result);
				this.sendCodes = false;
				const userInfiData = this.fillinthemembershipformData.MembersCredential || this.fillinthemembershipformData
					.WorkerMembersCredential;
				const userObj = {
					applyUserName: userInfiData.name,
					applyIdCard: userInfiData.idNumber,
					applyPhone: this.fillinthemembershipformData.PhoneNumberCredential.mobileNumber,
					applyTradeUnionName: result['applyUnionName'],
					applyTradeUnionId: result['applyUnionId'],
					approvalPerson: result['userDid'],
					approvalPersonDid: result['userDid']
				};
				console.log(userObj);
				this.$tab.navigateTo(
				
					`/pages/work/applyfororganizer?userObj=${encodeURIComponent(JSON.stringify(userObj))}`
					
					);
			},

			goapplyfororganizer() {
				this.$refs.popups.open();
				this.sendCodes = true;
			},

			getUserApplicationRecords() {
				console.log("555");
				// getUserApplicationRecords().then(res=>{
				// 	console.log('getUserApplicationRecords');
				// })

			},


			formDataSet(form) {
				this.dataInfo.push(form)
				this.fillinthemembershipformData = form
			},


			gofillinthemembershipform() {
				if (this.fillinthemembershipformData.MembersCredential) {
					toast('您已经是会员，无需重复入会')
					return
				}
				const userObj = {
					
					// approvalPerson: this.fillinthemembershipformData.WorkerMembersCredential.userDid,
					// approvalPersonName: this.fillinthemembershipformData.WorkerMembersCredential.name,
					
					applyUserDid: this.fillinthemembershipformData.WorkerMembersCredential.userDid,
					applyUserName: this.fillinthemembershipformData.WorkerMembersCredential.name,
					applyIdCard: this.fillinthemembershipformData.WorkerMembersCredential.idNumber,
					applyPhone: this.fillinthemembershipformData.PhoneNumberCredential.mobileNumber,
					effectiveEndTime: this.fillinthemembershipformData.PhoneNumberCredential
						.effectiveEndTime,
					effectiveStartTime: this.fillinthemembershipformData.PhoneNumberCredential
						.effectiveStartTime,
				}

				console.log(userObj, "userObj");

				this.$tab.navigateTo(`/pages/work/fillinthemembershipform?userObj=${JSON.stringify(userObj)}`)
			},
			goscanthecodetojoin() {
				if (this.fillinthemembershipformData.MembersCredential) {
					toast('您已经是会员，无需重复入会')
					return
				}
				this.$refs.popup.open()
				this.sendCode = true


			},
			onScan(result) {
				if (!result['applyUnionId']) {
					toast('请扫描正确的二维码')
					this.$refs.popup.close();
					return
				}
				this.$refs.popup.close();

				const {
					WorkerMembersCredential,
					MembersCredential,
					PhoneNumberCredential
				} = this.fillinthemembershipformData;

				const userObj = {
					applyUserDid: (WorkerMembersCredential && WorkerMembersCredential.userDid) || (MembersCredential &&
						MembersCredential.userDid),
					applyUserName: (WorkerMembersCredential && WorkerMembersCredential.name) || (MembersCredential &&
						MembersCredential.name),
					applyIdCard: (WorkerMembersCredential && WorkerMembersCredential.idNumber) || (MembersCredential &&
						MembersCredential.idNumber),
					applyPhone: PhoneNumberCredential?.mobileNumber || '',
					effectiveEndTime: PhoneNumberCredential?.effectiveEndTime || '',
					effectiveStartTime: PhoneNumberCredential?.effectiveStartTime || '',
					settledUnionId: result['applyUnionId'],
					settledUnionName: result['applyUnionName'],
				};

				console.log(userObj, "userObj");

				this.$tab.navigateTo(
					`/pages/work/scanthecodetojoin?userObj=${encodeURIComponent(JSON.stringify(userObj))}`);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.membertransfer {
		margin: 0 32rpx;

		.img {
			width: 686rpx;
			height: 300rpx;
			margin: 8px 0;
		}

		.btn-img {
			display: flex;

			.image {
				width: 172rpx;
				height: 172rpx;
			}

			.right1 {
				margin-bottom: 16rpx;
			}
		}

		.marginL8 {
			margin-left: 16rpx;
		}

		.tianbao {
			width: 686rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
		}

		.tianbao-backimg {
			background-image: url("../../static/images/beijing.png");
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.tianbao-img {
			width: 42rpx;
			height: 42rpx;
		}

		.tb-text {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(255, 255, 255, 1);
			text-align: justify;
			vertical-align: top;
		}
	}

	.marginL20 {
		margin-left: 30rpx;
	}

	.steps {
		display: flex;
		flex-direction: column;
		padding: 32rpx;

		.step {
			display: flex;
			align-items: center;
			position: relative;

			.circle {
				width: 20rpx;
				height: 20rpx;
				background: rgba(189, 26, 45, 1);
				transform: rotate(45deg);
			}

			.step-title {
				width: auto;
				height: 96rpx;
				line-height: 96rpx;
				margin-left: 16rpx;
				flex: 1;
			}

			.line {
				width: 1px;
				height: 64rpx;
				border: 1px dashed rgba(229, 229, 229, 1);
				position: absolute;
				left: 10rpx;
				top: 64rpx;
			}
		}
	}

	.laba {
		padding: 26rpx 48rpx;

		.laba-img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		color:rgba(189, 26, 45, 1);
	}


	.borderradiuss {
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}
</style>